import React,{useEffect,useState} from 'react';
import {View,Animated,Easing,StyleSheet,Dimensions} from 'react-native';

const sw = Dimensions.get('window').width;

export default function BottomLoadingView(){

    const [x,setX] = useState(new Animated.Value(0));
    const times = Math.round((sw * 0.86)/10);
    useEffect(() => {
        const LoadingLineAnim = Animated.timing(
            x,
            {
                duration:450,
                toValue: 1,
                easing:Easing.linear,
            })
        let loop = Animated.loop( LoadingLineAnim );

        loop.start();

        return () => {
            loop.stop();
        }
    }, [])

    return (
        <View style={{width:sw,justifyContent:'center',alignItems:'center'}}>
            <Animated.View
             style={{
                 height:1.5,
                 width: 10,
                 backgroundColor:'white',
                 transform:[
                     {
                         scaleX: x.interpolate({
                             inputRange: [0,1],
                             outputRange: [1,times]
                         })
                     }
                 ],
                 opacity: x.interpolate({
                     inputRange:[0,1],
                     outputRange: [1,0.3]
                 })
             }}
            />
        </View>
    )
}

const style=StyleSheet.create({

})